<template>
    <view class="container">
        <view class="searchWapper">
            <input type="text" @input="search" v-model="query"/>
            <text @click="toback">取消</text>
        </view>
        <view class="resultWapper" v-if="list" >
            <navigator 
            class="result-item" 
            v-for="(item,index) in list" :key="index"
            :url="'/pages/goods_detail/index?id='+item.goods_id"
            >{{item.goods_name}}
            </navigator>
        </view>
    </view>
</template>

<script>
let timer = -1;
export default {
    data(){
        return{
            query:'',
            list:[]
        }
    },
    methods:{
        search(e){
            const value = e.target.value;
            if(value.trim()){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    this.loadQuery(e.target.value);
                },1000);
            }
        },
        async loadQuery(query){
            const res = await this.request({
                url:'/goods/qsearch',
                data:{
                    query
                }
            })
            this.list = res;
        },
        toback(){
            // 返回上一页
            uni.navigateBack({
               delta: 1
            })
        }
    }
}
</script>

<style lang="scss">
.container{
    background-color: #EEEEEE;
    height:100vh;
}
.searchWapper{
    display: flex;
    justify-content: space-between;
    padding:20rpx;
    input{
        flex:3;
        height:70rpx;
        background-color: #fff;
    }
    text{
        flex:1;
        margin-left: 20rpx;
        text-align: center;
        height:70rpx;
        line-height: 70rpx;
        background-color: #fff;
    }
}
.resultWapper{
    margin-top: 20rpx;
    padding:0 20rpx;
    max-height: calc(100vh - 65px);
    overflow-y:auto;
    .result-item{
        padding:20rpx 20rpx;
        border-bottom: 1px solid #666;
        &:last-child{
            border-bottom: 0;
        }
    }
}

</style>